<template>
  <div class="page-content">
    <div class="apk-management">
      <div class="page-header">
        <div class="header-actions">
          <div 
            class="custom-upload-btn"
            @click="handleShowUploadDialog"
          >
            <i class="el-icon-upload"></i>
            <span>上传 APK</span>
          </div>
        </div>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-filters">
        <el-form :inline="true" :model="apkSearchForm">
          <el-form-item label="游戏">
            <el-select 
              v-model="apkSearchForm.game" 
              placeholder="选择游戏" 
              clearable
              style="width: 200px"
            >
              <el-option label="ROM" value="ROM" />
              <el-option label="尤弥尔传奇国际服" value="尤弥尔传奇国际服" />
              <el-option label="万国觉醒" value="万国觉醒" />
              <el-option label="梦幻西游" value="梦幻西游" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadAPKList">查询</el-button>
            <el-button @click="resetAPKSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- APK列表 -->
      <div class="apk-list-container">
        <div v-if="apkLoading" class="loading-container">
          <div class="loading-spinner">
            <div class="spinner"></div>
            <p>加载中...</p>
          </div>
        </div>
        <div v-else class="table-container">
          <div class="table-header">
            <div class="header-cell name-col">名称</div>
            <div class="header-cell game-col">游戏</div>
            <div class="header-cell version-col">版本号</div>
            <div class="header-cell size-col">文件大小</div>
            <div class="header-cell time-col">上传时间</div>
            <div class="header-cell status-col">状态</div>
            <div class="header-cell actions-col">操作</div>
          </div>
          <div class="table-body">
            <div v-if="apkList.length === 0" class="empty-state">
              <div class="empty-icon">📱</div>
              <div class="empty-text">暂无APK数据</div>
              <div class="empty-desc">点击右上角"上传 APK"按钮添加应用</div>
            </div>
            <div v-else v-for="apk in apkList" :key="apk.id" class="table-row">
              <div class="cell name-col">{{ apk.name }}</div>
              <div class="cell game-col">{{ apk.game }}</div>
              <div class="cell version-col">{{ apk.version_code }}</div>
              <div class="cell size-col">{{ formatFileSize(apk.file_size) }}</div>
              <div class="cell time-col">{{ formatDate(apk.upload_time) }}</div>
              <div class="cell status-col">
                <span :class="['status-badge', apk.is_active ? 'active' : 'inactive']">
                  {{ apk.is_active ? '启用' : '禁用' }}
                </span>
              </div>
              <div class="cell actions-col">
                <div class="apk-actions">
                  <button class="action-btn edit" @click="editAPK(apk)">
                    编辑
                  </button>
                  <button 
                    :class="['action-btn', apk.is_active ? 'warning' : 'success']"
                    @click="toggleAPKStatus(apk)"
                  >
                    {{ apk.is_active ? '禁用' : '启用' }}
                  </button>
                  <button class="action-btn delete" @click="deleteAPK(apk)">
                    删除
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 分页 -->
          <div class="pagination" v-if="apkPagination.total > 0">
            <el-pagination
              @size-change="handleAPKSizeChange"
              @current-change="handleAPKCurrentChange"
              :current-page="apkPagination.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="apkPagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="apkPagination.total"
              :pager-count="7"
            />
          </div>
        </div>
      </div>

      <!-- 自定义上传对话框 -->
      <div v-if="showUploadDialog" class="upload-dialog">
        <div class="upload-dialog-overlay" @click="showUploadDialog = false"></div>
        <div class="upload-dialog-content">
          <div class="upload-dialog-header">
            <h2>📱 上传 APK</h2>
            <button class="close-btn" @click="showUploadDialog = false">✕</button>
          </div>
          
          <div class="upload-dialog-body">
            <!-- 文件上传区域 -->
            <div class="upload-area" @click="$refs.fileInput.click()" :class="{ 'has-file': uploadForm.file }">
              <input 
                ref="fileInput" 
                type="file" 
                accept=".apk"
                @change="handleFileSelect"
                style="display: none"
              >
              <div v-if="!uploadForm.file" class="upload-placeholder">
                <i class="upload-icon">📱</i>
                <p>点击选择APK文件</p>
                <p class="upload-tip">支持.apk文件，最大100MB</p>
              </div>
              <div v-else class="file-info">
                <i class="file-icon">✅</i>
                <p class="file-name">{{ uploadForm.file.name }}</p>
                <p class="file-size">{{ formatFileSize(uploadForm.file.size) }}</p>
              </div>
            </div>

            <!-- 表单信息 -->
            <div class="upload-form">
              <div class="form-row">
                <label>APK名称 *</label>
                <input 
                  v-model="uploadForm.name" 
                  type="text" 
                  placeholder="请输入APK名称"
                  class="form-input"
                >
              </div>
              
              <div class="form-row">
                <label>游戏类型 *</label>
                <select v-model="uploadForm.game" class="form-select">
                  <option value="ROM">ROM</option>
                  <option value="尤弥尔传奇国际服">尤弥尔传奇国际服</option>
                  <option value="万国觉醒">万国觉醒</option>
                  <option value="梦幻西游">梦幻西游</option>
                </select>
              </div>
              
              <div class="form-row">
                <label>版本号 *</label>
                <input 
                  v-model.number="uploadForm.version_code" 
                  type="number" 
                  placeholder="请输入版本号"
                  class="form-input"
                  min="1"
                >
              </div>
              
              <div class="form-row">
                <label>描述信息</label>
                <textarea 
                  v-model="uploadForm.description" 
                  placeholder="请输入APK描述信息（可选）"
                  class="form-textarea"
                  rows="3"
                ></textarea>
              </div>
            </div>

            <!-- 上传进度 -->
            <div v-if="uploading" class="upload-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
              </div>
              <p class="progress-text">{{ uploadStatusText }}</p>
            </div>
          </div>
          
          <div class="upload-dialog-footer">
            <button class="cancel-btn" @click="showUploadDialog = false" :disabled="uploading">
              取消
            </button>
            <button 
              class="upload-btn" 
              @click="handleUpload" 
              :disabled="!canUpload || uploading"
            >
              {{ uploading ? '上传中...' : '开始上传' }}
            </button>
          </div>
        </div>
      </div>

      <!-- 编辑APK对话框 -->
      <el-dialog
        title="编辑APK"
        v-model="showEditDialog"
        width="500px"
        :close-on-click-modal="false"
      >
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="名称" required>
            <el-input v-model="editForm.name" placeholder="请输入APK名称" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input 
              v-model="editForm.description" 
              type="textarea" 
              :rows="3"
              placeholder="请输入描述信息"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showEditDialog = false">取消</el-button>
            <el-button type="primary" @click="handleAPKUpdate" :loading="updating">
              更新
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import apkAPI from '../api/apk'

export default {
  name: 'APKManagement',
  setup() {
    // APK管理相关数据
    const apkLoading = ref(false)
    const apkList = ref([])
    const apkSearchForm = ref({
      game: 'ROM'
    })
    const apkPagination = ref({
      page: 1,
      pageSize: 10,
      total: 0
    })

    // 上传相关
    const showUploadDialog = ref(false)
    const uploading = ref(false)
    const uploadProgress = ref(0)
    const uploadStatusText = ref('')
    const uploadForm = ref({
      file: null,
      name: '',
      game: 'ROM',
      version_code: 1,
      description: ''
    })

    // 编辑相关
    const showEditDialog = ref(false)
    const updating = ref(false)
    const editForm = ref({
      id: null,
      name: '',
      description: ''
    })

    // 检查是否可以上传
    const canUpload = computed(() => {
      return uploadForm.value.file && 
             uploadForm.value.name && 
             uploadForm.value.game && 
             uploadForm.value.version_code > 0
    })

    // APK管理相关方法
    const loadAPKList = async () => {
      apkLoading.value = true
      try {
        const params = {
          page: apkPagination.value.page,
          page_size: apkPagination.value.pageSize,
          ...apkSearchForm.value
        }
        
        // 过滤空值
        Object.keys(params).forEach(key => {
          if (params[key] === '' || params[key] === null) {
            delete params[key]
          }
        })

        const response = await apkAPI.getAPKList(params)
        const data = response?.data?.data || response?.data || {}
        
        apkList.value = data.list || []
        apkPagination.value.total = data.total || 0
        apkPagination.value.page = data.page || 1
        apkPagination.value.pageSize = data.pageSize || data.page_size || 10
      } catch (error) {
        const errorMessage = error.response?.data?.error || 
                           error.response?.data?.message || 
                           error.message || 
                           '未知错误'
        ElMessage.error('加载APK列表失败: ' + errorMessage)
      } finally {
        apkLoading.value = false
      }
    }

    const resetAPKSearch = () => {
      apkSearchForm.value = {
        game: 'ROM'
      }
      apkPagination.value.page = 1
      loadAPKList()
    }

    const handleAPKSizeChange = (val) => {
      apkPagination.value.pageSize = val
      apkPagination.value.page = 1
      loadAPKList()
    }

    const handleAPKCurrentChange = (val) => {
      apkPagination.value.page = val
      loadAPKList()
    }

    const handleShowUploadDialog = async () => {
      showUploadDialog.value = true
      await setNextVersionCode()
    }
    
    const setNextVersionCode = async () => {
      try {
        const response = await apkAPI.getLatestAPK(uploadForm.value.game)
        uploadForm.value.version_code = (response.data?.version_code || 0) + 1
      } catch (error) {
        uploadForm.value.version_code = 1
      }
    }

    const handleFileSelect = (event) => {
      const file = event.target.files[0]
      if (file) {
        if (file.size > 100 * 1024 * 1024) { // 100MB
          ElMessage.error('文件大小不能超过100MB')
          return
        }
        
        uploadForm.value.file = file
        
        // 自动填充APK名称（去掉.apk后缀）
        if (!uploadForm.value.name) {
          uploadForm.value.name = file.name.replace(/\.apk$/i, '')
        }
      }
    }

    const handleUpload = async () => {
      uploading.value = true
      uploadProgress.value = 0
      uploadStatusText.value = '准备上传...'

      try {
        const formData = new FormData()
        formData.append('file', uploadForm.value.file)
        formData.append('name', uploadForm.value.name)
        formData.append('game', uploadForm.value.game)
        formData.append('version_code', uploadForm.value.version_code)
        formData.append('description', uploadForm.value.description)

        uploadStatusText.value = '上传中...'
        uploadProgress.value = 50

        await apkAPI.uploadAPK(formData)
        
        uploadProgress.value = 100
        uploadStatusText.value = '上传成功!'
        
        ElMessage.success('APK上传成功!')
        showUploadDialog.value = false
        resetUploadForm()
        loadAPKList()
      } catch (error) {
        const errorMessage = error.response?.data?.error || 
                           error.response?.data?.message || 
                           error.message || 
                           '未知错误'
        ElMessage.error('上传失败: ' + errorMessage)
      } finally {
        uploading.value = false
        uploadProgress.value = 0
        uploadStatusText.value = ''
      }
    }

    const resetUploadForm = () => {
      uploadForm.value = {
        file: null,
        name: '',
        game: 'ROM',
        version_code: 1,
        description: ''
      }
    }

    const editAPK = (apk) => {
      if (!apk) {
        ElMessage.error('APK数据无效')
        return
      }
      editForm.value = {
        id: apk.id,
        name: apk.name,
        description: apk.description || ''
      }
      showEditDialog.value = true
    }

    const handleAPKUpdate = async () => {
      updating.value = true
      try {
        await apkAPI.updateAPK(editForm.value.id, {
          name: editForm.value.name,
          description: editForm.value.description
        })

        ElMessage.success('APK更新成功!')
        showEditDialog.value = false
        resetEditForm()
        loadAPKList()
      } catch (error) {
        const errorMessage = error.response?.data?.error || 
                         error.response?.data?.message || 
                         error.message || 
                         '未知错误'
        ElMessage.error('更新失败: ' + errorMessage)
      } finally {
        updating.value = false
      }
    }

    const resetEditForm = () => {
      editForm.value = {
        id: null,
        name: '',
        description: ''
      }
    }

    const toggleAPKStatus = async (apk) => {
      if (!apk) {
        ElMessage.error('APK数据无效')
        return
      }
      try {
        await apkAPI.toggleAPKStatus(apk.id)
        ElMessage.success('状态切换成功!')
        loadAPKList()
      } catch (error) {
        const errorMessage = error.response?.data?.error || 
                         error.response?.data?.message || 
                         error.message || 
                         '未知错误'
        ElMessage.error('状态切换失败: ' + errorMessage)
      }
    }

    const deleteAPK = async (apk) => {
      if (!apk) {
        ElMessage.error('APK数据无效')
        return
      }
      try {
        await ElMessageBox.confirm(`确定要删除APK "${apk.name || '未知APK'}" 吗？`, '确认删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await apkAPI.deleteAPK(apk.id)
        ElMessage.success('删除成功!')
        loadAPKList()
      } catch (error) {
        if (error === 'cancel') return
        const errorMessage = error.response?.data?.error || 
                         error.response?.data?.message || 
                         error.message || 
                         '未知错误'
        ElMessage.error('删除失败: ' + errorMessage)
      }
    }

    // 格式化文件大小
    const formatFileSize = (bytes) => {
      if (!bytes || bytes === 0) return '0 B'
      try {
        const k = 1024
        const sizes = ['B', 'KB', 'MB', 'GB']
        const i = Math.floor(Math.log(bytes) / Math.log(k))
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
      } catch (error) {
        console.error('文件大小格式化失败:', error)
        return '-'
      }
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '-'
      try {
        const date = new Date(dateString)
        if (isNaN(date.getTime())) return '-'
        return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { hour12: false })
      } catch (error) {
        console.error('日期格式化失败:', error)
        return '-'
      }
    }

    onMounted(async () => {
      await loadAPKList()
    })

    return {
      apkLoading,
      apkList,
      apkSearchForm,
      apkPagination,
      showUploadDialog,
      uploading,
      uploadProgress,
      uploadStatusText,
      uploadForm,
      showEditDialog,
      updating,
      editForm,
      canUpload,
      loadAPKList,
      resetAPKSearch,
      handleAPKSizeChange,
      handleAPKCurrentChange,
      handleShowUploadDialog,
      handleFileSelect,
      handleUpload,
      resetUploadForm,
      editAPK,
      handleAPKUpdate,
      resetEditForm,
      toggleAPKStatus,
      deleteAPK,
      formatFileSize,
      formatDate
    }
  }
}
</script>

<style scoped>
.page-content {
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.apk-management {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 4px;
}

.search-filters {
  margin-bottom: 20px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
}

/* APK列表容器 */
.apk-list-container {
  flex: 1;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loading-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top: 3px solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner p {
  margin: 0;
  color: #86868b;
  font-size: 16px;
}

/* 表格样式 */
.table-container {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: grid;
  grid-template-columns: 250px 150px 120px 120px 180px 80px 280px;
  background: #f8f9fa;
  padding: 16px 20px;
  font-weight: 600;
  color: #1d1d1f;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: 16px;
}

.table-body {
  flex: 1;
  overflow: auto;
}

.table-row {
  display: grid;
  grid-template-columns: 250px 150px 120px 120px 180px 80px 280px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  align-items: center;
  transition: all 0.2s ease;
  gap: 16px;
}

.table-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.header-cell, .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.cell {
  color: #1d1d1f;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: rgba(52, 199, 89, 0.1);
  color: #34c759;
}

.status-badge.inactive {
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

.pagination {
  padding: 20px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 自定义主要操作按钮样式 */
.custom-upload-btn {
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 6px;
  width: 120px;
  height: 40px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.custom-upload-btn:hover {
  background: #66b1ff;
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
  transform: translateY(-1px);
}

.custom-upload-btn:active {
  background: #3a8ee6;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
}

.custom-upload-btn i {
  font-size: 14px;
  margin-right: 6px;
}

.custom-upload-btn span {
  font-size: 14px;
}

/* APK管理操作按钮样式 */
.apk-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-btn {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  font-weight: 500;
}

.action-btn.edit {
  color: #007aff;
  border-color: rgba(0, 122, 255, 0.2);
}

.action-btn.edit:hover {
  background: rgba(0, 122, 255, 0.1);
}

.action-btn.warning {
  color: #ff9500;
  border-color: rgba(255, 149, 0, 0.2);
}

.action-btn.warning:hover {
  background: rgba(255, 149, 0, 0.1);
}

.action-btn.success {
  color: #34c759;
  border-color: rgba(52, 199, 89, 0.2);
}

.action-btn.success:hover {
  background: rgba(52, 199, 89, 0.1);
}

.action-btn.delete {
  color: #ff3b30;
  border-color: rgba(255, 59, 48, 0.2);
}

.action-btn.delete:hover:not(:disabled) {
  background: rgba(255, 59, 48, 0.1);
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: #86868b;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-text {
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 8px;
}

.empty-desc {
  font-size: 14px;
  color: #86868b;
}

/* 上传对话框样式 */
.upload-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.upload-dialog-content {
  background: white;
  border-radius: 12px;
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.upload-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.upload-dialog-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background: #f3f4f6;
}

.upload-dialog-body {
  padding: 24px;
}

.upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s;
  margin-bottom: 24px;
}

.upload-area:hover {
  border-color: #409EFF;
}

.upload-area.has-file {
  border-color: #10b981;
  background: #f0fdf4;
}

.upload-placeholder .upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.upload-placeholder p {
  margin: 8px 0;
  color: #6b7280;
}

.upload-tip {
  font-size: 14px;
  color: #9ca3af;
}

.file-info .file-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.file-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 8px 0;
}

.file-size {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.form-input, .form-select, .form-textarea {
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: #409EFF;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
}

.upload-progress {
  margin-top: 20px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #409EFF;
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  margin-top: 8px;
  color: #6b7280;
  font-size: 14px;
}

.upload-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn, .upload-btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.cancel-btn {
  background: #f5f7fa;
  color: #606266;
}

.cancel-btn:hover:not(:disabled) {
  background: #e6e8eb;
}

.upload-btn {
  background: #409EFF;
  color: white;
}

.upload-btn:hover:not(:disabled) {
  background: #66b1ff;
}

.upload-btn:disabled {
  background: #c0c4cc;
  cursor: not-allowed;
}

.dialog-footer {
  text-align: right;
}
</style>